<template>
	<view>
		<uni-card is-full>
			<text class="uni-h6">可以同时选择日期和时间的选择器</text>
		</uni-card>
		
		<Section :title="'日期用法：' + single" type="line" />
		<view class="example-body">
			<uni-datetime-picker type="date" :clear-icon="false" v-model="single" @maskClick="maskClick" />
		</view>
		
		<Section :title="'日期时间用法：' + dateTimeSingle" type="line" />
		<view class="example-body">
			<uni-datetime-picker type="datetime" v-model="Section" @change="changeLog" />
		</view>
		
		<Section :title="'日期范围用法：' + '[' + range + ']'" type="line" />
		<view class="example-body">
			<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
		</view>
		
		<Section :title="'日期时间范围用法：' + '[' + dateTimeRange + ']' " type="line" />
		<view class="example-body">
			<uni-datetime-picker v-model="dateTimeRange" type="datetimerange" rangeSeparator="至" />
		</view>
	</view>
</template>

<script setup>
import {ref, watch} from 'vue'

/* data */
const range = ref('')
const single = ref('')
const dateTimeSingle = ref('')
const dateTimeRange = ref([])

/* watch */
watch(range, newVal => console.log('单选:', range.value))
watch(dateTimeSingle, newVal => console.log('单选:', dateTimeSingle.value))
watch(dateTimeRange, newVal => console.log('范围选:', dateTimeRange.value))

/* methods */
function maskClick(e) {
	console.log('maskClick事件:', e)
}
function changeLog(e) {
	console.log('change事件:', e)
}
</script>

<style lang="scss" scoped>
@import '@/styles/var.scss';
	
.example-body {
	background-color: $bg-p;
	padding: 20rpx;
}
</style>